<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PS切图实战</title><br><br>
<style>
/* CSS reset start */
	*{ margin : 0; padding :0; }
	li{ list-style : none; }
 	a{ text-decoration : none; }
  	img{ vertical-align : top; }
 	/* CSS reset end */
	.clear : after{ clear : both; content : ""; display : block; }
 	.main{ width : 592px; }
 .title{ border-left : 3px #3489ff solid; height : 25px; 
		 line-height : 25px; }
	.title h2{ float : left; font-size : 20px; margin-left : 10px;}
	.title p{ float : left; color : #f73b20; margin-left : 16px;}
	.list{ border : 1px #b5cde7 solid; padding-top : 8px; 
		margin-top : 12px; }
.list li{ width : 75px; margin-left : 20px; float : left; }
.list div{ height : 42px; background :url(city.png) no-repeat;}
.list div.city1{ background-position : center 0; }
.list div.city2{ background-position : center -42px; }
 	.list div.city3{ background-position : center -84px; }
	.list div.city4{ background-position : center -126px; }
.list div.city5{ background-position : center -168px; }
.list div.city6{ background-position : center -210px; }
.list a{ color : #7b7c77; text-align : center; display : block;
height : 40px; line-height : 40px; }
.list a.active{ background : #3787ff; color : #fff; }

</style>
</head>
<body>
<div class="main">
	<div class="title clear">
			<h2>全国开班</h2>
			<p>12座城市无差别教学，就近选择，全国就业</p>
 		</div>
 		<ul class="list clear">
  			<li>
 				<div class="city1"></div>
				<a href="#">北京</a>
 			</li>
			<li>
 				<div class="city2"></div>
				<a href="#">上海</a>
			</li>
 			<li>
 				<div class="city3"></div>
 				<a href="#">深圳</a>
			</li>
 			<li>
				<div class="city4"></div>
 			<a href="#">广州</a>
			</li>
 
			<li>
				<div class="city5"></div>
				<a href="#">郑州</a>
			</li>
			<li>
			<div class="city6"></div>
				<a href="#">武汉</a>
			</li>
		</ul>
	</div>
</body>
</html>
